<template>
	<view v-if="userinfo">
		<view class="poster-wrap">
			<image class="poster" src="/static/poster.jpg" mode="aspectFill"></image>
			
			<view class="qrcode-wrap">
				<image :src="userinfo.qrcode" mode="aspectFill" class="qrcode"></image>
			</view>
		<!-- 	
			<view class="qrcode-area">
				<view class="qrcode-num">邀请码 {{userinfo.q}}</view>
				<view class="qrcode-title">一起开黑组队挖宝石</view>
			</view> -->
		</view>

		<view class="poster-thumb-wrap">
			<image class="poster-thumb" :src="filePath" mode="aspectFill"></image>
		</view>

		<view class="btns">
			<view class="btn">
				<image class="icon" src="/static/share1.png" mode="aspectFill"></image>
				<view class="btn-title">微信好友</view>
			</view>
			<view class="btn">
				<image class="icon" src="/static/share2.png" mode="aspectFill"></image>
				<view class="btn-title">微信朋友圈</view>
			</view>
			<view @click="posterHandle(true)" class="btn">
				<image class="icon" src="/static/share3.png" mode="aspectFill"></image>
				<view class="btn-title">下载图片</view>
			</view>
		</view>

		<fui-poster ref="generator" :width="909" :height="1615" @ready="ready"></fui-poster>
	</view>
</template>

<script>
	export default {
		onShow() {
			this.get_userinfo();
		},
		data() {
			return {
				userinfo:null,
				filePath: '',
				isReady: false,
				basicData: {
					blocks: [{
							//背景
							x: 0,
							y: 0,
							width: 909,
							height: 1615,
							borderRadius: 10,
							backgroundColor: '#000000'
						},
						{
							//绘制二维码正方形
							x: 720,
							y: 1400,
							width: 160,
							height: 160,
							borderRadius: 16,
							backgroundColor: '#ffffff',
							zIndex: 3
						},
						{
							//绘制文字长方形
							x: 20,
							y: 1500,
							width: 680,
							height: 70,
							borderRadius: 70,
							backgroundColor: '#2c2c2c',
							zIndex: 3
						}
					],
					imgs: [{
							imgResource: '/static/poster.jpg',
							x: 0,
							y: 0,
							width: 909,
							height: 1615,
							borderRadius: 40,
							zIndex: 2
						},
						{
							imgResource: '/static/ic_ape_stone.png',
							x: 725,
							y: 1405,
							width: 150,
							height: 150,
							zIndex: 3
						}
					],
					texts: [{
							text: '邀请码 3966902',
							x: 60,
							y: 1545,
							fontSize: 32,
							color: '#ffffff',
							width: 520,
							fontWeight: 'bold',
							zIndex: 4
						},
						{
							text: '',
							x: 400,
							y: 1545,
							fontSize: 28,
							color: '#ffffff',
							width: 300,
							zIndex: 5
						},
					],
				}
			};
		},

		methods: {
			
			get_userinfo(){
				let that = this;
				uni.showLoading({ title: '正在加载', mask: true });
				uni.hideLoading();
				that.$api.request('/api/user/get_info', {},uni.getStorageSync('token'), function(res) {
								uni.hideLoading()
								if (res.code === 1) {
									that.userinfo = res.data
									// console.log(that.basicData.texts,777777777)
									that.basicData.texts[0].text =  "邀请码 "+res.data.q
									//imgResource
									that.basicData.imgs[1].imgResource =  res.data.qrcode
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
				});
				
			},
			//组件初始化完成事件
			ready() {
				this.isReady = true;
				this.posterHandle();
			},
			saveImageToPhotosAlbum() {
				console.log(1);
				// #ifdef APP-PLUS
				uni.saveImageToPhotosAlbum({
					filePath: this.resultImg, // 需要临时文件路径，base64无法保存
					success: () => {
						this.$refs.sharePopup.show = false;
						uni.showToast({
							title: '已保存到相册',
							icon: 'success'
						});
					},
					fail(err) {
						uni.showToast({ title: '保存失败', icon: 'error' });
					}
				});
				// #endif
				// #ifdef H5
				this.previewImage();
				// #endif
			},
			posterHandle(type) {
				if (this.isReady) {
					uni.showLoading({
						title: '正在生成...'
					});
					try {
						this.$refs.generator.generatePoster(this.basicData, (res) => {
							
							this.filePath = res;
							if (type) {
								// #ifdef H5
								uni.previewImage({
									urls: [res]
								});
								
								// #endif
								// #ifndef H5
								// this.$refs.saveImage(res);
									uni.saveImageToPhotosAlbum({
										filePath: this.filePath, // 需要临时文件路径，base64无法保存
										success: () => {
				
											uni.showToast({
												title: '已保存到相册',
												icon: 'success'
											});
										},
										fail(err) {
											uni.showToast({ title: '保存失败', icon: 'error' });
										}
									});
								// #endif
							}
							uni.hideLoading();
						});
					} catch (e) {

					}
				} else {
					uni.showToast({
						title: '组件尚未初始化完成！',
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style lang="less">
	page {
		background: #1f1f1f;
		min-height: 100vh;
	}

	.poster-wrap {
		width: 650rpx;
		margin: 32rpx auto;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		position: relative;

		.poster {
			width: 650rpx;
			height: 1156rpx;
			border-radius: 16rpx;
		}
		
		.qrcode-wrap {
			position: absolute;
			right: 16rpx;
			bottom: 40rpx;
			width: 120rpx;
			height: 120rpx;
			background: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
		}
		
		.qrcode {
			width: 100rpx;
			height: 100rpx;
		}
		
		.qrcode-area {
			position: absolute;
			left: 16rpx;
			bottom: 10rpx;
			color: #fff;
			display: flex;
			align-items: center;
			font-size: 22rpx;
			background: rgba(255, 255, 255, 0.5);
			height: 40rpx;
			border-radius: 30rpx;
			width: 490rpx;
			
			.qrcode-num {
				font-size: 22rpx;
				margin-left: 12rpx;
			}
			
			.qrcode-title {
				font-size: 20rpx;
				margin-left: 12rpx;
			}
		}
	}

	.poster-thumb-wrap {
		display: flex;
		justify-content: center;
		align-items: center;

		.poster-thumb {
			width: 100rpx;
			height: 176rpx;
			border: 1px solid #fff;
			border-radius: 8rpx;
		}
	}

	.btns {
		display: flex;
		align-items: center;
		padding: 32rpx 0 64rpx;

		.btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 33.33%;
			color: rgba(255, 255, 255, 0.5);
			font-size: 24rpx;
		}

		.icon {
			width: 50rpx;
			height: 50rpx;
			margin-bottom: 16rpx;
		}
	}
	
</style>